<template>
  <div class="chapter-test-page">
    <div class="header">
      <button @click="goBack" class="back-button">返回</button>
      <h1>单元测试详情</h1>
    </div>
    <form v-if="questions.length > 0" @submit.prevent="submitTest">
      <div v-for="(question, index) in questions" :key="index" class="question-item">
        <h3>{{ index + 1 }}. {{ question.title }}
          <!-- <span class="question-type">({{ question.qs_type === 'only_sel' ? '单选题' : '多选题' }})</span> -->
          <span class="question-type">
    {{
        question.qs_type === 'only_sel' ? '单选题' :
        question.qs_type === 'many_sel' ? '多选题' :
        question.qs_type === 'yesorno' ? '判断题' :
        '未知题型'
    }}
</span>
          <span class="question-score"> ({{ question.max_score }}) 分</span>
        </h3>
        <div v-if="question.qs_type === 'only_sel'" class="options">
          <div v-for="(option, optIndex) in getOptions(question)" :key="optIndex" class="option">
            <label>
              <input type="radio" :name="'question-' + index" :value="letters[optIndex]" v-model="answers[question.qs_id]" />
              {{ letters[optIndex] }} {{ option }}
            </label>
          </div>
        </div>
        <div v-if="question.qs_type === 'yesorno'" class="options">
          <div v-for="(option, optIndex) in getPDOptions(question)" :key="optIndex" class="option">
            <label>
              <input type="radio" :name="'question-' + index" :value="letters[optIndex]" v-model="answers[question.qs_id]" />
              {{ letters[optIndex] }} {{ option }}
            </label>
          </div>
        </div>
        <div v-else-if="question.qs_type == 'many_sel'" class="options">
          <div v-for="(option, optIndex) in getOptions(question)" :key="optIndex" class="option">
            <label>
              <input type="checkbox" :value="letters[optIndex]"  @change="toggleOption(question.qs_id, letters[optIndex])"/>
             {{ letters[optIndex] }} {{ option }}
            </label>
          </div>
        </div>
      </div>
      <button type="submit" class="submit-button">提交测试</button>
    </form>
    <div v-else class="no-questions">
      暂无测试题目
    </div>
  </div>
</template>

<script>
import api from '../api';
export default {
  data() {
    return {
      letters: ['A', 'B', 'C', 'D'], // 固定的字母
      questions: [
        // {
        //   qs_id: 1,
        //   title: '数字媒体技术主要包括以下哪些内容？',
        //   qs_type: 'many_sel',
        //   max_score: 10,
        //   a_option: '图像处理',
        //   b_option: '音频处理',
        //   c_option: '视频处理',
        //   d_option: '文本处理'
        // },
        // {
        //   qs_id: 2,
        //   title: '在图像处理中，常用的压缩算法是？',
        //   qs_type: 'only_sel',
        //   max_score: 5,
        //   a_option: 'JPEG',
        //   b_option: 'PNG',
        //   c_option: 'GIF',
        //   d_option: 'BMP'
        // },
        // {
        //   qs_id: 3,
        //   title: '以下哪些技术是视频处理常用的技术？',
        //   qs_type: 'many_sel',
        //   max_score: 10,
        //   a_option: '帧间压缩',
        //   b_option: '帧内压缩',
        //   c_option: '色度抽样',
        //   d_option: '光线追踪'
        // },
        // {
        //   qs_id: 4,
        //   title: '音频处理中的采样率通常使用多少赫兹？',
        //   qs_type: 'only_sel',
        //   max_score: 5,
        //   a_option: '22050 Hz',
        //   b_option: '44100 Hz',
        //   c_option: '48000 Hz',
        //   d_option: '96000 Hz'
        // },
        // {
        //   qs_id: 5,
        //   title: '在数字媒体技术中，以下哪种格式是无损压缩音频格式？',
        //   qs_type: 'only_sel',
        //   max_score: 5,
        //   a_option: 'MP3',
        //   b_option: 'AAC',
        //   c_option: 'FLAC',
        //   d_option: 'OGG'
        // },
        // {
        //   qs_id: 6,
        //   title: '视频编码标准中，以下哪些属于H.264标准的特性？',
        //   qs_type: 'many_sel',
        //   max_score: 10,
        //   a_option: '高压缩率',
        //   b_option: '高质量视频',
        //   c_option: '低延迟',
        //   d_option: '简单实现'
        // },
        // {
        //   qs_id: 7,
        //   title: '以下哪个工具通常用于音频编辑？',
        //   qs_type: 'only_sel',
        //   max_score: 5,
        //   a_option: 'Adobe Premiere',
        //   b_option: 'Audacity',
        //   c_option: 'Final Cut Pro',
        //   d_option: 'After Effects'
        // },
        // {
        //   qs_id: 8,
        //   title: '在图像处理中，以下哪些方法用于图像增强？',
        //   qs_type: 'many_sel',
        //   max_score: 10,
        //   a_option: '直方图均衡',
        //   b_option: '拉普拉斯变换',
        //   c_option: '高斯模糊',
        //   d_option: '边缘检测'
        // }
      ],
      answers: {},
      test_id: this.$route.params.test_id,
      paper_id:null,
      user_id:localStorage.getItem("userid"),
    };
  },
  created(){
    this.fetchQuestions();
  },
  methods: {
    //加载具体问题与选项
    fetchQuestions(){
      api.getTestQuestions(this.test_id).then(response => {
        this.questions = response.data.data.questionsList;
        this.paper_id=response.data.data.paper_id;
        // console.log(JSON.stringify(this.questions, null, 2))
      }).catch(error => {
        console.error('Failed to fetch assignments:', error);
      });
    },
    submitTest() {
      const formattedAnswers = this.formatAnswers();
      const data={
        // test_id:this.test_id,
        test_id:this.test_id,
        paper_id:this.paper_id,
        user_id:this.user_id,
        answers:formattedAnswers
      }
      console.log("提交", JSON.stringify(data, null, 2));
      api.submitTestAnswers(data).then(response => {
        if(response.data.code=="S0000")
        alert('测试提交成功,得分：'+response.data.data);
        else 
        alert('测试提交失败');
      }).catch(error => {
        console.error('Failed to submit test:', error);
      });
    },
    formatAnswers() {
      const formattedAnswers = [];
      for (const [qs_id, answer] of Object.entries(this.answers)) {
        formattedAnswers.push({
          qs_id: parseInt(qs_id),
          qs_ans: Array.isArray(answer) ? answer.join('') : answer
        });
      }
      return formattedAnswers;
    },
    goBack() {
      this.$router.push({ name: 'Assignments' });
    },
    getOptions(question) {
      return [question.a_option, question.b_option, question.c_option, question.d_option];
    },
    getPDOptions(question) {
      return [question.a_option, question.b_option];
    },
    toggleOption(qs_id, option) {
      if (!this.answers[qs_id]) {
        this.answers[qs_id] = [];
      }
      const index = this.answers[qs_id].indexOf(option);
      if (index > -1) {
        this.answers[qs_id].splice(index, 1);
      } else {
        this.answers[qs_id].push(option);
      }
      console.log("我看看", JSON.stringify(this.answers, null, 2));
    },
    // isChecked(qs_id, option) {
    //   return this.answers[qs_id] && this.answers[qs_id].indexOf(option) > -1;
    // }
  }
};
</script>

<style scoped>
.chapter-test-page {
  padding: 30px;
  background-color: #f9f9f9;
  margin: 0 150px 0 150px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.header h1 {
  margin: 0 auto;
  color: #333;
}
.back-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
.back-button:hover {
  background-color: #0056b3;
}
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.question-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}
.question-item:last-child {
  border-bottom: none;
}
h3 {
  color: #007bff;
  text-align: left;
}
.question-type, .question-score {
  font-size: 14px;
  color: #555;
}
.options {
  margin-top: 10px;
  text-align: left;
}
.option {
  margin-bottom: 10px;
}
label {
  display: block;
  margin: 5px 0;
}
input[type="radio"],
input[type="checkbox"] {
  margin-right: 10px;
}
.submit-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}
.submit-button:hover {
  background-color: #0056b3;
}
.no-questions {
  text-align: center;
  color: #888;
  padding: 20px;
}
</style>
